<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* .A{
            color: red;
        }

        .C{
            color: red;
        }

        .D{
            color: red;
        } */

        .A, .D, .C{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 
        1. 组合选择器
            给不同的选择器赋予相同的样式

            s1, s2, s3, ...{
                属性名:属性值;
                属性名:属性值;
            }

        2. 冗余率
            代码重复越多, 冗余率越高
            好代码: 执行效率高,代码量少

            组合选择器降低冗余率
     -->


</body>
    <ul>
        <li>川菜</li>
        <ol>
            <li>麻辣豆腐</li>
            <li class="A">水煮白菜</li>
            <li>水煮牛肉</li>
            <li>毛血旺</li>
            <li>肉蟹煲</li>
        </ol>

        <li>粤菜</li>
        <ol class="B">
            <li>佛跳墙</li>
            <li>烧腊</li>
            <li class="C">海鲜火锅</li>
        </ol>

        <li>江浙菜</li>
        <ol>
            <li>梅干菜</li>
            <li class="D">梅菜扣肉</li>
            <li>糖醋排骨</li>
        </ol>
    </ul>

</html>